import React from 'react'
import {createStyles} from "antd-style";
import {Img} from './classes/Img'
import photoControl from './classes/PhotoControl.ts'

// 定义循环图片下一张的逻辑
const nextImageSelector = {
    forward: 0,
    random: 1,
}
let ns = nextImageSelector.forward

// 调用该函数，获取图片并迭代图片控制器
export const getNextImage = async () => {
    switch (ns) {
        case nextImageSelector.forward:
            photoControl.next()
            break;
        case nextImageSelector.random:
            photoControl.randomNext()
            break;
    }
    const data = await photoControl.getPhoto()
    return new Img(data);
}

const useStyle = createStyles(({css, token}) => {
    return {
        container: css`
            position: fixed;
            left: 0;
            bottom: 0;
            z-index: 1000;
            display: flex;
            flex-direction: column;

            button {
                background-color: rgba(0, 0, 0, .2);
                backdrop-filter: blur(10px);
                border: none;
                padding: 10px;
                font-size: 20px;
                transition: all .5s;
                
                &:hover {
                    background-color: rgba(220, 125, 125, 0.3);
                }
                
                &:active {
                    background-color: rgba(220, 125, 125, 1);
                }
            }
        `
    }
})

const PhotoController: React.FC<{prop: () => void}> = (prop) => {
    const styles = useStyle().styles;

    return (
        <div className={styles.container}>
            <button onClick={() => {
                ns = nextImageSelector.forward
            }}>顺序</button>
            <button onClick={() => {
                ns = nextImageSelector.random
            }}>随机</button>
            <button onClick={() => {
                photoControl.setContainer(Math.floor(Math.random() * 200))
            }}>随机容器</button>
            <button onClick={() => {
                photoControl.setContainer(photoControl.getContainer() + 1)
            }}>下一个容器</button>
            <button onClick={() => {
                prop.prop()
            }}>隐藏</button>
        </div>
    )
}

export default PhotoController